<template>
      <el-form :model="insertForm">
        <el-form-item label="username">
            <el-input  v-model="insertForm.username" @blur="findUsername" />
        </el-form-item>
        <el-form-item label="name">
            <el-input  v-model="insertForm.name" />
        </el-form-item>
        <el-form-item label="gender">
            <el-radio-group  v-model="insertForm.gender">
                <el-radio label="男" size="small">
                    男
                </el-radio>
                <el-radio label="女" size="small">
                    女
                </el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="age">
            <el-slider  v-model="insertForm.age" show-input />
        </el-form-item>
        <el-form-item label="password">
            <el-input  v-model="insertForm.password" />
        </el-form-item>
    </el-form>
    <el-button @click="submit">提交</el-button>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElForm, ElMessage,ElNotification } from 'element-plus';
import {searchStudentByName,insertStudent} from '../API/ApiMethod'
import {AES_Encrypt} from '../crypto/index'
components:{
    ElForm
}
const insertForm=reactive({
    name:'',
    username:'',
    age:'',
    gender:'',
    password:''
})

const open=()=>{
    ElNotification({
        title:'警告',
        message:'用户名占用',
        type:'error'
    })
}
let booleanInsert=ref(false)
function findUsername(){
    searchStudentByName(insertForm.username).then(res=>{
        console.log(res)
        if(res.code==10000&&res.data.length>0){
            open()
        }else if(res.code==10000&&res.data.length==0){
           booleanInsert.value=true
        }
    })
}
function submit(){
 if(insertForm.name!=''&&insertForm.username!=''&&insertForm.age!=''&&insertForm.gender!=''&&insertForm.password!=''){
    if(booleanInsert.value){
         insertStudent(insertForm.name,insertForm.username,insertForm.age,insertForm.gender,AES_Encrypt(insertForm.password)).then(res=>{
            console.log(res)
         })
    }else{
        ElMessage({
            type:'error',
            message:'用户名占用'
        })
    }
 }else{
    ElMessage({
        type:'error',
        message:'信息不全'
    })
 }
}
</script>

<style>

</style>